<template>
	<div class="main-con">
		<div class="searches-wrapper">
			<el-form class="queryForm" :model="queryFormData" ref="queryForm" label-width="80px" :inline="true" size="small" label-suffix=": ">
				<el-form-item prop="orderTitle" label="申请标题">
					<el-input v-model="queryFormData.orderTitle" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item prop="state" label="单据状态">
					<el-select v-model="queryFormData.state" placeholder="请选择" clearable filterable>
						<el-option v-for="item in stateOptions" :key="item.code" :label="item.name" :value="item.code"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="proName" label="所属项目">
					<el-input v-model="queryFormData.proName" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item class="form-item-btn">
					<el-button type="default" @click="resetQueryForm">重置</el-button>
					<el-button type="primary" @click="loadData">查询</el-button>
					<!-- <el-button type="text" @click="showMore">{{ formBtnText }} <i class="el-icon-arrow-down"></i></el-button> -->
				</el-form-item>
			</el-form>
		</div>
		<div class="card-table">
			<div class="card-title">
				<div class="title-con">
					资产列表
				</div>
				<el-button v-hasPerm="['out_add']" type="primary" size="mini" @click="add">创建下架申请单</el-button>
			</div>
			<el-table ref="tabRef" class="systemTable" :data="dataSource" v-loading="loading" stripe :height="tableHeight">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="orderNum" label="单据编号" width="210">
					<template v-slot="{ row }">
						<span style="color: #0096FF;">{{ row.orderNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderTitle" label="下架申请标题" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="assetCount" label="下架资产数量" min-width="115"></el-table-column>
				<el-table-column prop="proName" label="所属项目" min-width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="executeLeaderName" label="实施负责人" min-width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createUserName" label="申请人" min-width="85"></el-table-column>
				<el-table-column prop="createTime" label="申请时间" width="120">
					<template v-slot="{ row }">
						{{ dateFormat(row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="stateName" label="状态" width="100">
					<template v-slot="{ row }">
						<span :class="`stateColor${row.state}`">
							●
						</span>
						{{ row.stateName }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="190" fixed="right">
					<template v-slot="{ row }">
						<el-button v-if="rowBtnHasPerm(['out_cancel'], row.state == '1')" class="text-btn-table" type="text" @click="putCancel(row)">撤回</el-button>
						<!-- <el-button v-hasPerm="['out_up']" class="text-btn-table" v-if="row.state == '1'" type="text" @click="putUp(row)">通过</el-button>
						<el-button v-hasPerm="['out_back']" class="text-btn-table" v-if="row.state == '1'" type="text" @click="putBack(row)">驳回</el-button> -->
						<el-button v-if="rowBtnHasPerm(['out_up'], row.state == '1' && row.wfInstNodeId)" class="text-btn-table" type="text" @click="passHandler(row)">通过</el-button>
						<el-button v-if="rowBtnHasPerm(['out_back'], row.state == '1' && row.wfInstNodeId)" class="text-btn-table" type="text" @click="rejectHandler(row)">驳回</el-button>
						<el-button v-if="rowBtnHasPerm(['out_edit'], row.state == '0' || row.state == '8')" class="text-btn-table" type="text" @click="edit(row)">编辑</el-button>
						<el-button v-if="rowBtnHasPerm(['out_reEdit'], row.state == '5')" class="text-btn-table" type="text" @click="edit(row)">重新提交</el-button>
						<el-button v-if="rowBtnHasPerm(['out_check'], row.state == '2')" class="text-btn-table" type="text" @click="commitCheck(row)">提交验收</el-button>
						<el-button v-if="rowBtnHasPerm(['out_checkPass'], row.state == '3')" class="text-btn-table" type="text" @click="putCheckPass(row)">验收确认</el-button>
						<el-button v-if="rowBtnHasPerm(['out_reCheckPass'], row.state == '4')" class="text-btn-table" type="text" @click="commitCheck(row)">重新验证</el-button>
						<el-button v-if="rowBtnHasPerm(['out_info'], row.state != '0')" class="text-btn-table" type="text" @click="showInfo(row)">详情</el-button>
						<el-button v-if="rowBtnHasPerm(['out_del'], row.state == '0' || row.state == '5' || row.state == '8')" class="text-btn-table" type="text" @click="del(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="systemPagination"
				:current-page="pageParams.currentPage"
				:page-sizes="pageParams.pageSizes"
				:page-size="pageParams.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageParams.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
		<check-win dialogTitle="下架验收确认" :showWin.sync="showCheckPassWin" :checkData="selectRow" :dataId="selectRowId" checkType="out" @onPass="loadData" @onBack="loadData" />
		<asset-flow-send v-if="showFlowSend" @close="closeFlowSend" :checkType="checkFlowType" @ok="FlowSendsave" :instNodeId="instNodeId" :sendtype="sendtype" :wfUrl="wfUrl"></asset-flow-send>
	</div>
</template>
<script>
	import ModelDialog from '@/views/components/ModelDialog'
	import CheckWin from './models/CheckWin'
	import QRCodeInfo from './models/QRCodeInfo'
	import singleTableMixin from '@/mixins/singleTableMixin'
	import assetOutApi from '@/api/assetOutApi'
	import assetFlowMixin from '@/mixins/assetFlowMixin'
	import { getAction, postAction } from '@/utils/httpUtil'
	export default {
		name: 'assetOutList',
		components: {
			ModelDialog,
			CheckWin,
		},
		mixins: [singleTableMixin, assetFlowMixin],
		data() {
			return {
				apiUrl: { ...assetOutApi },
				wfClassId: '',
				stateOptions: [
					//0草稿;1待审核;2实施中;3待验收;4验收驳回;5审核驳回;6已完成;8已撤回;
					{ code: null, name: '全部' },
					{ code: '0', name: '草稿' },
					{ code: '1', name: '待审核' },
					{ code: '2', name: '实施中' },
					{ code: '3', name: '待验收' },
					{ code: '4', name: '验收驳回' },
					{ code: '5', name: '审核驳回' },
					{ code: '6', name: '已下架' },
					{ code: '8', name: '已撤回' },
				],
				showCheckPassWin: false,
				selectRowId: null,
				wfUrl: {
					getSendToUrl: '/assetManageOut/getSendTo',
					sendToUrl: '/assetManageOut/sendTo',
					getBackToUrl: '/assetManageOut/getBackTo',
					backToUrl: '/assetManageOut/backTo',
				},
			}
		},
		mounted() {
			this.getTableHeight()
			this.wfClassId = this.$route.meta.wfClassId
		},
		methods: {
			getTableHeight() {
				let contentHeight = document.getElementsByClassName('main-con')[0].offsetHeight
				let searchesHeight = document.getElementsByClassName('searches-wrapper')[0].offsetHeight
				this.$nextTick(() => {
					this.tableHeight = contentHeight - searchesHeight - 130
				})
			},
			add() {
				this.$router.push(`/assetOutAdd/${this.wfClassId}`)
			},
			edit(row) {
				this.$router.push(`/assetOutAdd/${this.wfClassId}?id=${row.id}`)
			},
			del(row) {
				this.messageBox('是否确认删除?').then(res => {
					if (res.action) {
						getAction(`${this.apiUrl.del}${row.id}`).then(res => {
							if (res.success) {
								this.$message.success(res.msg)
								this.loadData()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				})
			},
			/**
			 * 撤回
			 * @param {*} row
			 */
			putCancel(row) {
				this.messageBox('是否确认撤回?').then(res => {
					if (res.action) {
						postAction(this.apiUrl.outCancel, { assetManageId: row.id }).then(res => {
							if (res.success) {
								this.loadData()
							}
						})
					}
				})
			},
			/**
			 * 通过
			 * @param {*} row
			 */
			putUp(row) {
				this.messageBox('是否确认通过?').then(res => {
					if (res.action) {
						postAction(this.apiUrl.outPass, { assetManageId: row.id }).then(res => {
							if (res.success) {
								this.loadData()
							}
						})
					}
				})
			},
			/**
			 * 提交审核驳回
			 * @param {*} row
			 */
			putBack(row) {
				this.$prompt('驳回原因: ', '资产下架提交驳回', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					inputValidator: function(val) {
						if (val) return true
						else return false
					},
					inputErrorMessage: '请输入驳回原因',
					inputPlaceholder: '请输入驳回原因',
				})
					.then(({ value }) => {
						postAction(this.apiUrl.outBack, {
							assetManageId: row.id,
							backNotes: value,
						}).then(res => {
							if (res.success) {
								this.loadData()
							}
						})
					})
					.catch(() => {})
			},
			showInfo(row) {
				this.$router.push(`/assetOutInfo/${row.id}`)
			},
			putCheck(row) {
				this.messageBox('是否确认提交验收?').then(res => {
					postAction(this.apiUrl.check, { assetManageId: row.id }).then(res => {
						if (res.success) {
							this.loadData()
						}
					})
				})
			},
			/**
			 * 验收确认
			 * @param {*} row
			 */
			putCheckPass(row) {
				this.showCheckPassWin = true
				this.selectRowId = row.id
				this.selectRow = row
			},
			/**
			 * 重新验收
			 * @param {*} row
			 */
			rePutCheckPass(row) {
				this.messageBox('是否确认重新提交验收?').then(res => {
					if (res.action) {
						postAction(this.apiUrl.check, { assetManageId: row.id }).then(res => {
							if (res.success) {
								this.loadData()
							}
						})
					}
				})
			},
			passHandler(row) {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = 1
				this.instNodeId = row.wfInstNodeId
			},
			rejectHandler(row) {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = -1
				this.instNodeId = row.wfInstNodeId
			},
			flowCallback() {
				this.loadData()
			},
			commitCheck(row) {
				this.showFlowSend = true
				this.checkFlowType = 2
				this.sendtype = 1
				this.instNodeId = row.wfInstNodeId
			},
		},
	}
</script>
<style lang="scss" scoped>
	.searches-wrapper {
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		padding: 8px;
	}

	.card-table {
		background: #ffffff;
		padding: 15px 10px;
		margin-top: 10px;
		border-radius: 6px;
	}

	.form-item-btn {
		position: absolute;
		right: 15px;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
		height: 30px;
		align-items: center;

		.title-con {
			height: 22px;
			padding-left: 10px;
			border-left: 4px solid rgba(33, 183, 149, 1);
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}

	.stateColor0 {
		color: #02a7f0;
	}

	.stateColor1 {
		color: #f59a23;
	}

	.stateColor2 {
		color: #d9001b;
	}

	.stateColor3 {
		color: #0487ed;
	}

	.stateColor4 {
		color: #d9001b;
	}

	.stateColor5 {
		color: #d9001b;
	}

	.stateColor6 {
		color: #039d12;
	}

	.stateColor8 {
		color: #555;
	}

	.text-btn-table {
		color: #409eff !important;
	}
</style>
